<template>
    <button :class="[checked?'topper-btn-container active':'topper-btn-container']" @click="changeTopper">
        {{name}}
    </button>
</template>

<script>
export default {
    name: "topperBtn",
    props:['name', 'checked'],
    emits:['changeTopper'],
    setup(props, context) {
        function changeTopper() {
            context.emit('changeTopper',props.name)
        }

        return {
            changeTopper
        }
    }
}
</script>

<style scoped>
.topper-btn-container {
    outline: none;
    border: none;
    background-color: transparent;
    font-size: 20px;
    height: 100%;
    width: auto;
    display: flex;
    align-items: center;
    transition: all 300ms  ease-in-out;
}

.topper-btn-container.active {
    color: red;
    text-shadow: 0 0 4px #ff7b7b;
}
</style>